<template>
    <div class="storeOrder">
        <IHeader class="header" back="true" title="商城订单"></IHeader>
        <div class="order-header">
            <text v-for="(item, index) in tabList" :key="index" class="navItem" @click="swithNav(index)" :class="[idx === index ?  'afterpress': 'navItem']">{{item.description}}</text>
        </div>
        <div class="xian"></div>
        <list @loadmore="loadmore">
            <cell class="store-item" v-for="(item) in dataList" :key="item.id">
                <div class="store-info">
                    <div class="store-name">
                        <image :src="imgPath('home.png')" class="storeImg"></image>
                        <text class="storename">{{item.shopsName}}</text>
                    </div>
                    <div class="delete-con">
                        <text class="daifukuan" v-if="item.orderStatus === '1'">待付款</text>
                        <text class="daifukuan" v-if="item.orderStatus === '2'">待发货</text>
                        <text class="daifukuan" v-if="item.orderStatus === '3'">待收货</text>
                        <text class="daifukuan" v-if="item.orderStatus === '4'">已完成</text>
                        <text class="daifukuan" v-if="item.orderStatus === '5'">已取消</text>
                        <text class="daifukuan" v-if="item.orderStatus === '6'">已转账</text>
                        <image :src="imgPath('shanchu.png')" v-if="item.orderStatus === '4' || item.orderStatus === '5'" class="delete" @click="deleteOrder(item.id)"></image>
                    </div>
                </div>
                <div class="good-wrap">
                    <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length === 1" @click="pushToGoodsDetail(item.id)">
                        <div class="good-item" v-for="item1 in item.goodsList" :key="item1.id">
                            <image :src="item1.goodsUrl" class="goodImg"></image>
                            <div class="good-right">
                                <text class="goodname">{{item1.goodsName}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length === 2" @click="pushToGoodsDetail(item.id)">
                        <div class="good-item goods-items" >
                            <div class="good-left">
                                <image v-for="item1 in item.goodsList" :key="item1.id" :src="item1.goodsUrl" class="goodImg"></image>
                            </div>
                            <div class="good-right">
                                <image :src="imgPath('write.png')" class="more"></image>
                            </div>
                        </div>
                    </div>
                    <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length !== 2 && item.goodsList.length !== 1" @click="pushToGoodsDetail(item.id)">
                        <div class="good-item goods-items">
                            <div class="good-left">
                                <image  :src="item.goodsList[0].goodsUrl" class="goodImg"></image>
                                <image  :src="item.goodsList[1].goodsUrl" class="goodImg"></image>
                                <image  :src="item.goodsList[2].goodsUrl" class="goodImg"></image>
                            </div>
                            <div class="good-right">
                                <image :src="imgPath('write.png')" class="more"></image>
                            </div>
                        </div>
                    </div>
                    <div class="all-price">
                        <text class="main-text1">共{{item.goodsAmount}}件商品，共计为：</text>
                        <text class="main-text">￥</text>
                        <text class="main-text main-text2">{{item.actualPrice}}</text>
                    </div>
                    <div class="all-btn">
                        <div class="btn-info">
                            <text class="btn" @click="transformMoney(item)" v-if="item.orderStatus === '1'" >已转账</text>
                            <!--<text class="btn" @click="pushToCheckstand(item)" v-if="item.orderStatus === '1'" >去支付</text>-->
                            <text class="btn" v-if="item.orderStatus === '2'" @click="buyAgain(item)">再次购买</text>
                            <text class="btn" v-if="item.orderStatus === '3'" @click="orderFinish(item.id)">确认收货</text>
                            <text class="btn" v-if="item.orderStatus === '5'" @click="buyAgain(item)">再次购买</text>
                            <text class="btn" v-if="item.orderStatus === '4' && idx !== 4" @click="callService(item)">申请售后</text>
                            <text class="btn againPay" v-if="item.orderStatus === '4' && idx !== 4" @click="buyAgain(item)">再次购买</text>
                            <text class="btn"  v-if="item.orderStatus === '1' && idx === 1" @click="cancelOrder(item.id)">取消订单</text>
                            <text class="btn"  v-if="item.orderStatus === '3' && idx === 3" @click="buyAgain(item)">再次购买</text>
                        </div>
                    </div>
                    <div class="xian"></div>
                </div>
            </cell>
        </list>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">泳衣库服务热线</text>
            <text class="phoneNumber">{{phoneNumber}}</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import {allOrder, cancelOrder, shouHuoOrder, deleteOrder} from '@/api/order'
import Nat from 'natjs'
import Modal from '@/components/modal'
import Dialog from '@/components/dialog'
const modal = weex.requireModule('modal')

export default {
  name: 'storeOrder',
  data () {
    return {
      tabList: [{'description': '全部', 'value': ''}, {'description': '待付款', 'value': 1}, {'description': '待发货', 'value': 2}, {'description': '待收货', 'value': 3}, {'description': '已取消', 'value': 5}],
      pageNo: 1,
      pageSize: 10,
      dataList: [],
      idx: 0,
      alltext: true,
      allBbtn: true,
      showModal: false,
      dialogShow: false,
      actualPrice: '',
      orderAchieve: false,
      phoneNumber: '', // 商家电话
      needMask: true, // 蒙版
      loadingShow: false, // loading显示
      hasMore: true, // 是否还有数据
      showDialog: false // 显示对话框
    }
  },
  mounted () {
    const that = this
    modal.toast({
      message: that.$route.query.idx
    })
    that.idx = that.$route.query.idx ? that.$route.query.idx : 0
    that.getDataList()
  },
  methods: {
    // 切换订单
    swithNav (inx) {
      const that = this
      that.idx = inx
      that.alltext = false
      that.hasMore = true
      that.pageNo = 1
      that.dataList = []
      that.getDataList()
    },
    getDataList () { // 获取数据
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        orderStatus: that.tabList[that.idx].value
      }
      that.loadingShow = true
      that.$api.get(allOrder, params, function (res) {
        that.loadingShow = false
        if (res.data.records.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(res.data.records)
      }, () => {
        that.loadingShow = false
      }, true)
    },
    loadmore () { // 加载更多
      if (!this.hasMore) {
        return
      }
      this.pageNo++
      this.getDataList()
    },
    // showAll () {
    //   const that = this
    //   that.alltext = true
    //   that.idx = 0
    //   let params = {
    //     pageNo: that.pageNo,
    //     pageSize: that.pageSize,
    //     orderStatus: ''
    //   }
    //   that.$api.get(allOrder + '?', params, function (res) {
    //     that.dataList = res.data
    //   }, () => {}, true)
    // },
    transformMoney (item) { // 已转账
      const that = this
      that.$api.post('/app/yykMallOrder/confirmTransfer?id=' + item.id, {}, (res) => {
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      })
    },
    // 删除订单
    deleteOrder (id) {
      const that = this
      that.$api.post(deleteOrder + '/' + id, {}, function (res) {
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      })
    },
    // 跳转到待收货
    pushToWaitGain () {
      this.$router.push('/mine/waitGain')
    },
    // 跳转到待付款
    pushToMyOrder () {
      this.$router.push('/mine/myOrder')
    },
    // 去支付 跳转到收银台
    pushToCheckstand (item) {
      const that = this
      that.$router.push({path: '/myorder/checkstand', query: {totalPrice: item.actualPrice, orderNo: item.orderNo}})
    },
    // 取消订单
    cancelOrder (id) {
      const that = this
      that.$api.post(cancelOrder + '/' + id, {}, function (res) {
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      })
    },
    // 订单完成
    orderFinish (id) {
      const that = this
      that.$api.post(shouHuoOrder + id, {}, function (res) {
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      })
    },
    // 再次购买
    buyAgain (item) {
      const that = this
      let list = []
      let obj = {
        shopId: item.shopsId,
        shopName: item.shopsName,
        id: item.id,
        userId: item.userId,
        goods: []
      }
      for (let j = 0; j < item.goodsList.length; j++) {
        obj.goods.push(item.goodsList[j])
      }
      list.push(obj)
      that.$router.push({path: '/mine/writeOrder', query: {paramsList: list}})
    },
    // 跳转到订单详情
    pushToGoodsDetail (id) {
      const that = this
      that.$router.push({path: '/mine/waitGain', query: {orderId: id}})
    },
    // 联系客服
    callService (item) { // 联系客服
      this.showDialog = true
      this.phoneNumber = item.shopsPhone
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      Nat.call(this.phoneNumber)
    }
  },
  components: {
    IHeader,
    Modal,
    WxcLoading,
    Dialog
  }
}
</script>

<style scoped>
    .order-header {
        height: 88px;
        margin-top: 88px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .navItem{
        font-size: 28px;
        color: rgb(134, 134, 134);
    }

    .xian {
        width: 750px;
        height: 16px;
        background-color: rgb(245, 245, 245);
    }

    .store-item {
        padding-top: 18px;
        padding-left: 24px;
        padding-right: 24px;
        /*flex-direction: column;*/
    }

    .store-info {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .storename {
        font-size: 30px;
        color: rgb(134, 134, 134);
    }

    .storeImg {
        width: 34px;
        height: 34px;
        margin-right: 17px;
    }

    .good-wrap {
        flex-direction: column;
    }

    .good-item {
        margin-top: 20px;
        background-color: rgb(235, 235, 235);
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
        flex-direction: row;
        border-radius: 10px;
        align-items: center;
    }

    .goodImg {
        width: 128px;
        height: 128px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-right: 15px;
    }

    .goodname {
        font-size: 28px;
        font-weight: bold;
        color: rgb(70, 70, 70);
        lines: 1;
        overflow: hidden;
        width: 520px;
        text-overflow: ellipsis;
    }

    .good-right {
        margin-left: 15px;
    }

    .store-name {
        flex-direction: row;
    }

    .daifukuan {
        font-size: 24px;
        color: rgb(255, 15, 55);
    }

    .all-price {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .main-text {
        font-size: 24px;
        color: rgb(134, 134, 134);
    }

    .main-text1 {
        font-weight: bold;
        font-size: 24px;
        font-family: regular;
        color: rgb(70, 70, 70);
    }

    .main-text2 {
        font-size: 30px;
        font-weight: bold;
    }

    .all-btn {
        height: 88px;
        flex-direction: row;
        justify-content: flex-end;
        padding-left: 24px;
        padding-right: 24px;
        flex: 1;
        justify-content: center;
    }

    .btn-info {
        width: 702px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(245, 245, 245);
        justify-content: flex-end;
        flex-direction: row;
        align-items: center;
    }

    .btn {
        padding-left: 50px;
        padding-right: 50px;
        height: 60px;
        line-height: 60px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(206, 206, 206);
        border-radius: 10px;
        font-size: 26px;
        color: rgb(70, 70, 70);
        fon-family: medium;
        margin-left: 16px;
    }

    .delete-con {
        flex-direction: row;
        align-items: center;
    }

    .delete {
        width: 42px;
        height: 42px;
        margin-left: 20px;
    }

    .more {
        width: 52px;
        height: 16px;
    }

    .goods-items {
        justify-content: space-between;
    }

    .good-left {
        flex-direction: row;
    }

    .buy {
        color: rgb(254, 203, 1);
        border-style: solid;
        border-color: rgb(254, 203, 1);
        border-width: 1px;
    }

    .disable {
        background-color: rgb(219, 219, 219);
        color: rgb(130, 129, 129);
        font-family: medium
    }

    .afterpress {
        font-size: 30px;
        font-weight: bold;
        color: rgb(70, 70, 70)
    }
    .active{
        font-size:30px;
        color:rgb(70,70,70);
        font-weight:bold
    }
    .againPay{
        background-color: #545c72;
        color: #fff;
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
</style>
